<template>
  <div>
    <ul class="title">
      <li v-on:click="changeTitle('/gameInfo/id', $event)" ref="title">游戏</li>
      <li v-on:click="changeTitle(`/review/id`, $event)">评价</li>
      <li v-on:click="changeTitle(`/detail/id`, $event)">圈子</li>
    </ul>
    <div class="screenshot">
      <div class="pic">
        <video
          v-for="(item, index) in gameData.movie"
          :key="'video' + index"
          :src="item.video_url"
          @click="playVideo"
        ></video>
        <img
          :src="item.full"
          v-for="(item, index) in gameData.picture"
          :key="'pic' + index"
        />
      </div>
      <div class="num">
        <img src="" /><span>{{ shotNum }}</span>
      </div>
    </div>
    <div class="infoHeader">
      <div class="info">
        <h2>{{ gameData.game_china_name || gameData.game_name }}</h2>
        <span>{{ gameData.game_name }}</span>
        <div class="review">
          <div class="platform">
            <img
              v-for="(item, index) in gameData.steam_platform"
              :key="'platform' + index"
              :src="`https://cdn.vgn.cn/mini-program/svg/system/${
                item === 'linux' ? 'windows' : item
              }_icon.svg`"
              style="background-color: gray"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div>
        <div class="wish">
          <img src="#" />
          心愿单
        </div>
        <div class="have">
          <img src="#" />
          拥有
        </div>
        <div class="share">
          <img src="#" />
          分享
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gameId: "",
      gameData: {},
      shotNum: 0,
      prev: "",
    };
  },
  async created() {
    this.gameId = this.$route.params.id;
    this.gameData = await this.$axios.get(
      `https://api.vgn.cn/steam/game/${this.gameId}`
    );
    this.gameData = this.gameData.data;
    this.shotNum = this.gameData.movie.length + this.gameData.picturenum;
  },
  methods: {
    jump(path) {
      /\/id$/.test(path) ? (path = path.replace("id", this.gameId)) : "";
      if (this.$route.fullPath === path) return;
      this.$router.push(path);
    },
    changeTitle(path, e) {
      this.jump(path);
      this.changePrev(e.target);
    },
    changePrev(ele) {
      if (this.prev) {
        this.prev.className = "";
        this.prev = ele;
      }
      this.prev.className = "active";
    },
    playVideo(e) {
      e.target.paused ? e.target.play() : e.target.pause();
    },
  },
  mounted() {
    this.prev = this.$refs.title;
    this.changePrev(this.$refs.title);
  },
};
</script>
<style lang="less" scoped>
@import url("@/style/index.less");
.title {
  .width(125);
  .height(30);
  .margin(12,0,0,20);
  display: flex;
  justify-content: space-between;
  li {
    .fontSize(15);
    color: #a3a3a3;
    &.active {
      color: #000;
      border-bottom: unit((2/37.5), rem) solid #000;
    }
  }
}
.screenshot {
  .margin(14,0,24,20);
  .height(136);
  position: relative;
  .pic {
    .height(136);
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    video {
      .width(258);
      height: 100%;
      .margin(0,12,0,0);
      border-radius: unit((5/37.5), rem);
    }
    img {
      .width(258);
      height: 100%;
      .margin(0,10,0,0);
      border-radius: unit((5/37.5), rem);
    }
  }
  .num {
    position: absolute;
    .bottom(-7.5);
    .right(10);
    .padding(3,3,3,3);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    .fontSize(10);
    border-radius: unit((15/37.5), rem);
    img {
      .width(16);
      .height(14);
      .margin(0,0,0,0);
    }
    span {
      display: inline-block;
      transform: scale(0.8);
    }
  }
}
</style>
